import React, { useState } from 'react';
import { Card, Layout } from 'antd';
import classNames from 'classnames';
import { RightOutlined, LeftOutlined } from '@ant-design/icons';
import styles from './index.less';

const { Sider, Content } = Layout;

const Index = (props) => {
  const { layout = {}, sider = {}, content = {}, switcher = false } = props;

  const { className: layoutClassName, ...layoutRest } = layout;

  const {
    children: siderChildren,
    className: siderClassName,
    switcherClassName,
    switcherHideComponent,
    switcherShowComponent,
    ...siderRest
  } = sider;

  const { children: contentChildren, className: contentClassName, ...contentRest } = content;

  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout className={classNames(styles.layout, layoutClassName)} {...layoutRest}>
      {collapsed ? (
        <div className={classNames(styles.collapsed)}>
          <div className={classNames(styles.switcher, styles.switcherLeft, switcherClassName)}>
            <a
              className={classNames('switcher', 'left')}
              onClick={() => {
                setCollapsed(!collapsed);
              }}
            >
              {switcherHideComponent || <RightOutlined />}
            </a>
          </div>
        </div>
      ) : (
        <Sider
          theme="light"
          width={250}
          className={classNames(styles.sider, siderClassName)}
          {...siderRest}
        >
          {switcher && (
            <div className={classNames(styles.switcher, styles.switcherRight, switcherClassName)}>
              <a
                className={classNames('switcher', 'right')}
                onClick={() => {
                  setCollapsed(!collapsed);
                }}
              >
                {switcherShowComponent || <LeftOutlined />}
              </a>
            </div>
          )}
          {siderChildren}
        </Sider>
      )}

      <Content className={classNames(styles.content, contentClassName)} {...contentRest}>
        <Card bordered={false} bodyStyle={{ paddingTop: 0 }}>
          {contentChildren}
        </Card>
      </Content>
    </Layout>
  );
};

Index.displayName = 'SiderContent';
export default Index;
